<template>
    <div class="main coupon-statistics">
        <section>
            <div class="block-header"><div>基础数据</div></div>
            <div class="block-content">
                <el-table :data="baseData" v-loading="pageLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                    <el-table-column align="center" label="发放总数" prop="quantity">
                        <template slot-scope="scope">
                            {{scope.row.quantity || '-'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="已领取" prop="receivedQuantity"></el-table-column>
                    <el-table-column align="center" label="已使用" prop="usedQuantity"></el-table-column>
                    <el-table-column align="center" label="已过期" prop="expiredQuantity"></el-table-column>
                    <el-table-column align="center" label="领取渠道（IOS / Android / H5）" min-width="150px">
                        <template slot-scope="scope">
                            {{scope.row.receivedQuantityFromIOS}} / {{scope.row.receivedQuantityFromAndroid}} / {{scope.row.receivedQuantityFromH5}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block-header"><div>转化数据</div></div>
            <div class="block-content">
                <el-table :data="transferData" v-loading="pageLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                    <el-table-column align="center" label="转化付款笔数" prop="orderCount"></el-table-column>
                    <el-table-column align="center" label="转化付款人数" prop="orderUsers"></el-table-column>
                    <el-table-column align="center" label="转化付款金额" prop="orderPrices"></el-table-column>
                    <el-table-column align="center" label="优惠面值金额" prop="couponPrice"></el-table-column>
                    <el-table-column align="center" label="优惠券转化率(%)" prop="couponUsePercent"></el-table-column>
                </el-table>
            </div>
        </section>
    </div>
</template>
<script>
    export default {
      name: 'couponStatistics',
      props: {
        id: { default: '' }
      },
      data(){
        return{
          pageLoading: false,
          baseData: [],
          transferData: []
        }
      },
      created(){
        this.fetchData();
      },
      methods: {
        fetchData(){
          if(this.id){
            this.pageLoading = true;
            this.request({
              url: '/coupon/system/activity/total',
              method: 'post',
              data: { couponActivityId: this.id }
            }).then(({data}) => {
              this.baseData = [data];
              this.transferData = [data];
              this.pageLoading = false;
            }).catch(err => {
              console.log(err);
              this.pageLoading = false;
            });
          }
        }
      }
    }
</script>
<style lang="scss">
    .coupon-statistics{
        .block-header{
            color: #1ea0ff;
            font-size: 14px;
            padding: 12px 0;
            margin-bottom: 12px;
            background: #f7f7f7;

            &>div{
                padding: 0 12px;
                border-left: 2px solid #1ea0ff;
            }
        }
        .block-content{
            margin-bottom: 24px;

            .el-table{
                max-width: 900px;
            }

            &:last-child{
                margin-bottom: 0;
            }
        }
    }
</style>
